<!DOCTYPE html
		PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Unobtrusive Accessible jQuery Image Flips</title>

	<link rel="stylesheet" type="text/css" href="imgflip.example.css"/>

	<script src="../../_jquery/jquery-1.3.2.js"></script>
	<script src="../imgflip.jquery.js"></script>
	<script src="../../pngfix/pngfix.jquery.js"></script><!-- used only for png example -->
	<script src="../../dropdown/dropdown.jquery.js"></script><!-- used only for dropdown example -->
	<script src="imgflip.example.js"></script>
</head>
<body>
	<h2>Unobtrusive Accessible jQuery Image Flips</h2>

	<h3>Regular Image Flip:</h3>
	<p id="regular_example">
		<img src="images/flip_off.gif" width="200" height="75" />
	</p>

	<h3>Form Input Image Flip:</h3>
	<form action="#" id="form_example">
		<fieldset>
			<input type="image" src="images/flip_off.gif" width="200" height="75" />
		</fieldset>
	</form>

	<h3>Image Flip With Anchor Tag:</h3>
	<p id="anchor_example">
		<a href="#"><img src="images/flip_off.gif" width="200" height="75" /></a>
	</p>

	<h3>Image Flip With Selector On Parent:</h3>
	<div id="parent_example">
		<p>Text</p>
		<p><img src="images/flip_off.gif" width="200" height="75" /></p>
		<p><a href="#">Click Here</a></p>
	</div>

	<h3>Image Flip With "Active" State On:</h3>
	<p id="active_example">
		<a href="#"><img src="images/flip_active.gif" width="200" height="75" /></a>
	</p>

	<h3>PNG Image Flip (uses pngfix plugin):</h3>
	<p id="png_example">
		<img src="images/png_off.png" width="200" height="75" />
	</p>

	<h3>Flips And Dropdowns:</h3>
	<div id="dropdown_example">
		<h4><img src="images/flip_off.gif" width="200" height="75" /></h4>
		<ul>
			<li><a href="#"><img src="images/global_nav_faqs_off.gif" width="28" height="14" /></a></li>
			<li>
				<h5><img src="images/global_nav_how_off.gif" width="86" height="13" /></h5>
				<ul>
					<li><a href="#"><img src="images/global_nav_order_off.gif" width="68" height="13" /></a></li>
					<li><a href="#"><img src="images/global_nav_stories_off.gif" width="103" height="13" /></a></li>
				</ul>
			</li>
			<li><a href="#"><img src="images/global_nav_home_off.gif" width="32" height="13" /></a></li>
		</ul>
	</div>

	<p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
</body>
</html>